import React, { Component , useState, useEffect } from 'react'
import * as echarts from 'echarts';
import ecStat from 'echarts-stat';
import { InboxOutlined } from '@ant-design/icons';
import axios from 'axios';
import {Modal, Spin,Button,Form,Upload,Input} from 'antd';

const formItemLayout = {
  labelCol: {
    span: 6,
  },
  wrapperCol: {
    span: 14,
  },
};
const antbtn = {
  width: '100%',
}

export default class PR extends Component {    
    constructor(props) {
        super(props);
        this.state = {
          loading: false,
          isModalOpen: false,
          ChartTitle:'',
          file: null,
          DataList:[],
          Xtitle:[],
          styles :{
            backgroundImage: 'url(/img/Bar.png)',
            backgroundRepeat: 'no-repeat',
            backgroundPosition: 'center center',
            backgroundSize: 'cover',
            width: '100%',
            height: '100vh'
          }
        };
        this.normFile = this.normFile.bind(this);
        this.onFinish = this.onFinish.bind(this);
        this.handleChange = this.handleChange.bind(this);
      }
    
      showModal = () => {
        this.setState({
          isModalOpen: true,
        });
      };
      handleOk = () => {
        this.setState({
          isModalOpen: false,
        });
      };
      handleCancel = () => {
        this.setState({
          isModalOpen: false,
        });
      };
      handleChange = (e) => {
        this.setState({
          ChartTitle: e.target.value,
        });
      }
      normFile = (e) => {
        console.log('Upload event:', e);
        const File = e.file;
        this.setState({ file: File });
      }
      onFinish = (values) => {
        this.setState({
          isModalOpen: false,
        });
        this.initChart();
      }
    initChart = () => {
        const { ChartTitle ,DataList } = this.state;
        this.setState({
            DataList:[],
          });
        var chartDom = document.getElementById('PRChart');
        this.myChart = echarts.init(chartDom);
        echarts.registerTransform(ecStat.transform.regression);
        fetch('./example/example-line.xlsx')
        .then(res =>res.text())
        .then(data => {
            const rows = data.split('\n');
            rows.map((row, index) => {
                const cells = row.split('\t');
                if(cells==''){return;}
                this.setState({
                    DataList :[...this.state.DataList,cells]
                })
            })
            this.state.DataList.shift();
            var option = {
                dataset: [
                    {
                    source: this.state.DataList
                    },
                    {
                    transform: {
                        type: 'ecStat:regression',
                        config: { method: 'polynomial' }
                    }
                    }
                ],
                title: {
                    text: ChartTitle,
                    left: 'center',
                    top: 16
                },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                    type: 'cross'
                    }
                },
                xAxis: {
                    splitLine: {
                    lineStyle: {
                        type: 'dashed'
                    }
                    },
                    splitNumber: 20
                },
                yAxis: {
                    min: -40,
                    splitLine: {
                    lineStyle: {
                        type: 'dashed'
                    }
                    }
                },
                series: [
                    {
                    name: 'scatter',
                    type: 'scatter'
                    },
                    {
                    name: 'line',
                    type: 'line',
                    smooth: true,
                    datasetIndex: 1,
                    symbolSize: 0.1,
                    symbol: 'circle',
                    label: { show: true, fontSize: 16 },
                    labelLayout: { dx: -20 },
                    encode: { label: 2, tooltip: 1 }
                    }
                ]
                };
                this.myChart.setOption(option);
        });
        
    }
    chartReseize = () => {
        this.myChart && this.myChart.resize()
    }
    componentDidMount() {
        this.initChart()
    }
    render() {
        const { isModalOpen ,loading } = this.state;
          return (
              <>
                <Button style={antbtn} onClick={() => this.showModal()} className='antbtn'>Open Modal</Button>
                <Modal title="Basic Modal" open={isModalOpen} onOk={() =>this.handleOk()} onCancel={() =>this.handleCancel()} 
                cancelButtonProps={{ style: { display: "none" } }} // 隐藏取消按钮
                okButtonProps={{ style: { display: "none" } }} // 隐藏确认按钮
                >
                <Spin spinning={loading}>  
                <Form onSubmit={this.handleSubmit}
                      name="validate_other"
                      {...formItemLayout}
                      onFinish={this.onFinish}
                      style={{
                        maxWidth: 600,
                      }}
                    >
                      <Form.Item label="Title">
                        <Input placeholder="Please Input Title" value={this.state.value} onChange={this.handleChange} />
                      </Form.Item>
                      <Form.Item label="Dragger">
                        <Form.Item name="dragger" multiple={false} valuePropName="file" getValueFromEvent={this.normFile} noStyle>
                         <Upload.Dragger name="files"  action="/upload.do" >
                            <p className="ant-upload-drag-icon">
                              <InboxOutlined />
                            </p>
                            <p className="ant-upload-text">Click or drag file to this area to upload</p>
                          </Upload.Dragger>
                          </Form.Item>
                        </Form.Item>
                        <Form.Item label="Example File">
                        <Button type="text" onClick={()=> this.getExampleFile()} danger>Example File</Button>
                        </Form.Item>
                      <Form.Item
                        wrapperCol={{
                          span: 12,
                          offset: 6,
                        }}
                      >
                        <Button type="primary" htmlType="submit" >
                          Submit
                        </Button>
                      </Form.Item>
                  </Form></Spin>
                </Modal>
            <div className='w100 h100' id='PRChart'></div>
              </>
        )
    }
}
